<template>
  <div>
    <el-row  class="header">
      <el-col :span="6">
        <span style="width:28%;text-align:right;float:left;line-height:36px;">用户：</span>
        <el-input v-model="terms.uname" placeholder="请输入用户名" style="width:55%" @keyup.enter.native="handleSearch"></el-input>
      </el-col>
      <el-col :span="6">
        <span style="width:28%;text-align:right;float:left;line-height:36px;">来源：</span>
        <el-select v-model="terms.srcTerm.selValue" style="width:55%;" placeholder="请选择来源" @change="handleSearch" clearable>
          <el-option v-for="item in terms.srcTerm.opts" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <span style="width:28%;text-align:right;float:left;line-height:36px;">状态：</span>
        <el-select v-model="terms.statusTerm.selValue" style="width:55%;" placeholder="请选择显示状态" @change="handleSearch" clearable>
          <el-option v-for="item in terms.statusTerm.opts" :key="item.value" :label="item.label" :value="item.value" >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <span style="width:28%;text-align:right;float:left;line-height:36px;">类型：</span>
        <el-select v-model="terms.typeTerm.selValue" style="width:55%;" placeholder="请选择类型" @change="handleSearch" clearable>
          <el-option v-for="item in terms.typeTerm.opts" :key="item.value" :label="item.label" :value="item.value" >
          </el-option>
        </el-select>
      </el-col>
      
    </el-row>
    <div class="tools header">
     <el-row>
        <el-col :span="6">
         <span style="width:28%;text-align:right;float:left;line-height:36px;">操作：</span>
          <el-select v-model="changeType.value" style="width:55%;" placeholder="请选择" clearable>
          <el-option
            v-for="item in changeType.opts"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            >
          </el-option>
          </el-select>
        </el-col>
        <el-col :span="4" :offset='14'>
          <el-button type="primary" @click="handleChangeType" style="width:30%;">分类</el-button>
          <el-button type="primary" @click="handleSearch" style="width:30%;">搜索</el-button>
        </el-col>
       
      </el-row>
    </div>
    <el-table :data="capital" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column
        v-for="(item,index) in capitalTit"
        :key="index" :prop="item.prop"
        :label="item.label"
        :min-width="item.width"
        :type="index === 0?'selection':''"
        v-if="index < 5">
      </el-table-column>
      <el-table-column
        label="建议内容"
        :min-width="100">
        <template slot-scope="scope">
          <span class="open" @click="handleOpenForm(scope.row)" v-if="scope.row.cContent">{{scope.row.cContent}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="图片"
        :min-width="100">
        <template slot-scope="scope">
          <span class="open" @click="handleOpenImg(scope.row.cPics)" v-if="scope.row.cPics && scope.row.cPics.length > 0">查看</span>
        </template>
      </el-table-column>
      <el-table-column
        label="回复内容"
        :min-width="100">
        <template slot-scope="scope">
          <span class="open" @click="handleOpenForm(scope.row)" v-if="scope.row.cReply">{{scope.row.cReply}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="提交时间"
        prop="tDate"
        :min-width="100">
        <template slot-scope="scope">
          <span>{{scope.row.tDate | fltDate}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="small"
            @click="handleOpenForm(scope.row)">回复</el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 30px 0;">
      <el-pagination @current-change="handleCurrentChange" :page-size="pageSize" layout="prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <!-- size="tiny" -->
    <!-- :before-close="beforeCloseForm" -->
    <el-dialog
    title="用户建议"
    :visible.sync="dialogForm.switch"
    :close-on-click-modal="false"
    >
      <reply-form
        ref="dialogForm"
        :Puname="dialogForm.val.uname"
        :Ptime="dialogForm.val.time"
        :Psuggest="dialogForm.val.suggest"
        :Pcontent="dialogForm.val.content"
        :Ptval="dialogForm.val.tvalue"
        :Pimg="dialogForm.val.img"
        :Pid="dialogForm.val.id"
        @oncloseDialogForm="handleCloseDialogForm"
        @onopenDialogImg="handleOpenImg"
      ></reply-form>
    </el-dialog>
    <el-dialog
    title="图片预览"
    :visible.sync="dialogImg.switch"
    :close-on-click-modal="false"
    >
    <div class="imgContianer">
      <div class="imgBox"
        v-for="(item,index) in dialogImg.img"
        :key="index"
      >
        <img :src="item" alt="">
      </div>
      <img :src="dialogImg.img"></div>
    </el-dialog>
  </div>
</template>
<script>
import ReplyForm from './components/replyForm'
import {dateFormat} from 'vux'

export default {
  data() {
    return {
      dialogForm:{
        switch:false,
        val:{
          uname:'',
          time:'',
          suggest:'',
          content:'',
          tvalue:'',
          img:'',
          id:0,
        }
      },
      dialogImg:{
        switch:false,
        img:'',
      },
      terms: {
        uname: '',
        srcTerm: {      // 财币选项
          selValue: '',
          opts: [
            {
              value: 0,
              label: '网站'
            },
            {
              value: 1,
              label: 'IOS APP'
            },
            {
              value: 2,
              label: 'Android APP'
            },
          ]
        },
        statusTerm: {
          selValue: '',
          opts: [
            {
              value: 0,
              label: '不显示到前台'
            },
            {
              value: 1,
              label: '显示到前台'
            },
          ]
        },
        typeTerm: {
          selValue: '',
          opts: [
            {
              value: 0,
              label: '产品'
            },
            {
              value: 1,
              label: '客服'
            },
          ]
        }
      },
      changeType:{
        value:'',
        opts:[
          {value:0,label:'产品'},
          {value:1,label:'客服'},
        ]
      },
      capitalTit: [
        {
          prop: 'id',
          label: '选择',
          width: '100'
        },
        {
          prop: 'ftype',
          label: '分类',
          width: '100'
        },
        {
          prop: 'cuser',
          label: '提交用户',
          width: '100'
        },
        {
          prop: 'cmtel',
          label: '手机号码',
          width: '100'
        },
        {
          prop: 'ffrom',
          label: '来源',
          width: '100'
        },
        {
          prop: 'cContent',
          label: '建议内容',
          width: '300'
        },
        {
          prop: 'cPics',
          label: '图片',
          width: '100'
        },
        {
          prop: 'cReply',
          label: '回复内容',
          width: '100'
        },
        {
          prop: 'tDate',
          label: '提交时间',
          width: '100'
        },
      ],
      capital: [],
      total: 0,
      pageSize: 20,
      page:1,
      multipleSelection: []
    }
  },
  filters:{
    fltDate(val){
      return dateFormat(new Date(val), 'YYYY-MM-DD HH:mm:ss')
    }
  },
  components:{
    ReplyForm
  },
  methods: {
    handleSearch(){
      this.page = 1
      this.getTableData()
    },
    handleSelectionChange(val){
      this.multipleSelection = val
    },
    handleChangeType(){
      this.getUpdateCT()
    },
    handleOpenForm(row){
      this.dialogForm.val = {
        uname:row.cuser,
        time:row.tDate,
        suggest:row.cContent || '',
        content:row.cReply || '',
        tvalue:row.ftype || '',
        img:row.cPics || '',
        id:row.id,
      }
      this.dialogForm.switch = true
    },
    handleOpenImg(img){
      this.dialogImg.img = img
      this.dialogImg.switch = true
    },
    handleCloseDialogForm(type){
      console.log('type:',type)
      if(type === 'submit'){
        this.getTableData()
      }
      this.dialogForm.switch = false
    },
    handleDelete(index,val){
      this.getDeleteSugges(val.id)
    },
    handleCurrentChange(val) {
      this.page = val
      this.getTableData()
    },
    async getTableData() {
      const {uname, srcTerm,statusTerm, typeTerm,} = this.terms
      const page = this.page
      const {data} = await this.$get(this, {
        api: 'manage/suggestList.do', data: {
          cUser: uname,
          ffrom1: srcTerm.selValue,
          fState: statusTerm.selValue,
          fType: typeTerm.selValue,
          pageSize: this.pageSize,
          page
        }
      })
      if (data.state === 0) {
        if (page == 1) {
          this.total = data.content.num
        }
        this.capital = data.content.data
      } else {
        this.$toast({
          message: data.message
        })
      }
    },
    async getUpdateCT(){   // 更新建议类型
      const {value} = this.changeType
      let tmpa = []
      let s = ''
      if(this.multipleSelection.length > 0 ){
        this.multipleSelection.forEach(item=>{
          tmpa.push(item.id)
        })
        s = tmpa.join()
      }
      try{
        const {data} = await this.$get(this,{
          api: 'manage/upSuggest.do',
          data:{
            cz: value,
            ida:s
          }
        })
        if(data.state === 0){
          this.getTableData()
        } else {
          this.$toast({
            message: data.message
          })
        }
      }catch(e){
        this.$warn('系统manage/upSuggest.do接口报错')
      }
    },
    async getDeleteSugges(id){
      try{
        const {data} = await this.$get(this,{
          api:'manage/delSuggest.do',
          data:{
            id
          }
        })
        if(data.state === 0 && data.content){
          this.getTableData()
          this.$toast({
            message:'删除成功'
          })
          return
        }
        this.$warn(data.message)
      }catch(e){
        this.$warn('系统manage/delSuggest.do接口报错')
      }
    }
  },
  mounted() {
    this.getTableData()
  }
}
</script>

<style lang="scss" scoped>
.header {
  font-size: 14px;
  padding-bottom: 20px;
}
.tools{
  margin-bottom:20px;
}
.open{
  display: inline-block;
  width:100%;
  height:20px;
  color:#20a0ff;
  text-overflow:ellipsis;
  white-space:nowrap;
  cursor: pointer;
}
.imgContianer{
  text-align:center;
  img{
    max-width:100%;
  }
}
</style>
